<template>
  <el-dialog width="1200px" :visible.sync="popupVisible" :before-close="close">
    <scrollbar>
      <div v-loading="popupLoading">
        <div id="one" align="center">
          <h1 style="font-size:25px;" align="center">Transposing</h1>
        </div>
        <div id="two" align="left">
          <svg id="barcode" />
        </div>
        <div id="four">
          <TABLE align="center" border="1" cellspacing="0" cellpadding="1" width="100%" style="border-collapse:collapse;table-layout:fixed" bordercolor="#333333">
            <thead style="font-size:12.5px">
              <TR>
                <TD width="5%">
                  <DIV align="center"></DIV>
                </TD>
                <TD width="10%">
                  <DIV align="center">
                    <b>Source Location</b>
                  </DIV>
                </TD>
                <TD>
                  <DIV align="center">
                    <b>SKU</b>
                  </DIV>
                </TD>
                <TD>
                  <DIV align="center">
                    <b>ProductName</b>
                  </DIV>
                </TD>
                <TD width="15%">
                  <DIV align="center">
                    <b>Spec</b>
                  </DIV>
                </TD>
                <TD width="8%">
                  <DIV align="center">
                    <b>Batch Num</b>
                  </DIV>
                </TD>
                <TD width="8%">
                  <DIV align="center">
                    <b>Shift Qty</b>
                  </DIV>
                </TD>
                <TD width="10%">
                  <DIV align="center">
                    <b>Target Location</b>
                  </DIV>
                </TD>
              </TR>
            </thead>
            <tbody style="font-size:12px">
              <tr v-for="(item,i) in tableData" :key="i">
                <td align="center">{{i+1}}</td>
                <td align="center">{{item.sourcelocationcode}}</td>
                <td align="center">
                  <svg :id="'code'+item.productspeccode" />
                </td>
                <td align="center" style="font-size:12px;line-height:22px;">{{item.productname}}</td>
                <td align="center" style="font-size:12px;line-height:22px;">{{item.productspec}}</td>
                <td align="center">{{item.batchnum}}</td>
                <td align="center">{{item.quantity}}</td>
                <td align="center">{{item.targetlocationcode}}</td>
              </tr>
            </tbody>
          </TABLE>
        </div>
      </div>
      <!-- table end -->
    </scrollbar>
    <div slot="footer" align="center">
      <el-button type="primary" @click="print()">{{$t('m.print')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import scrollbar from '@/components/common/scrollbar'
import { getLodop } from '@/utils/LodopFuncs'
import JsBarcode from 'jsbarcode'
export default {
  name:'transPrint',
  props:['popupVisible', 'detail', 'popupLoading'],
  data(){
    return {
      tableData:[]
    }
  },
  components:{
    scrollbar
  },
  watch:{
    //解决第一次点击打印获取不到数据的情况
    detail:{
      handler(){
        this.tableData = this.detail.locationShiftDetailList
          ? JSON.parse(JSON.stringify(this.detail.locationShiftDetailList))
          : []
        this.barcode(this.detail.locationshiftcode)
      }
    }
  },
  methods:{
    close(){
      this.$emit('close')
    },
    barcode(code){
      let barCode = code
      JsBarcode('#barcode', barCode, {
        format:'CODE128', //选择要使用的条形码类型
        height:60, //高度
        width:1.5, //设置条之间的宽度
        fontSize:14, //设置文本的大小
        text:barCode, //显示文本
        displayValue:true, //是否在条形码下方显示文字
        textPosition:'bottom', //设置文本的垂直位置
        //fontOptions: "bold italic", //使文字加粗体或变斜体
        background:'#fff', //设置条形码的背景
        font:'微软雅黑', //设置文本的字体
        //lineColor: "#2196f3", //设置条和文本的颜色。
        margin:15 //设置条形码周围的空白边距
      })
    },
    skuBarcode(){
      this.tableData.forEach(element => {
        let barCode = element.productspeccode
        JsBarcode(`#code${barCode}`, barCode, {
          format:'CODE128', //选择要使用的条形码类型
          height:30, //高度
          width:1, //设置条之间的宽度
          fontSize:12, //设置文本的大小
          text:barCode, //显示文本
          displayValue:true, //是否在条形码下方显示文字
          textPosition:'bottom', //设置文本的垂直位置
          //fontOptions: "bold italic", //使文字加粗体或变斜体
          background:'#fff', //设置条形码的背景
          font:'微软雅黑', //设置文本的字体
          //lineColor: "#2196f3", //设置条和文本的颜色。
          margin:0 //设置条形码周围的空白边距
        })
      })
    },
    printInit(){
      let LODOP = getLodop()
      LODOP.SET_PRINT_PAGESIZE(1, '', '', '')
      let strStyle = '<style>table,td{padding:3px 10px;word-break:break-word;}tbody td{word-wrap:break-word;}</style>'
      // let tableStyle = '<style> table,td,th {padding:3px 5px;}</style>'
      LODOP.ADD_PRINT_TABLE(
        180,
        '3%',
        '94%',
        850,
        strStyle + document.getElementById('four').innerHTML
      )
      LODOP.ADD_PRINT_HTM(
        60, //距离上面高度
        '3%',
        '94%',
        280, //元素高度
        strStyle + document.getElementById('two').innerHTML
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'LinkedItem', 1)
      LODOP.ADD_PRINT_HTM(
        30,
        '3%',
        '94%',
        109,
        document.getElementById('one').innerHTML
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'LinkedItem', 1)
      LODOP.NewPageA()
      LODOP.ADD_PRINT_HTM(
        10,
        650,
        200,
        100,
        '<font color=\'#0000ff\' format=\'Num\'><span tdata=\'pageNO\'>' +
          'NO.##'+'</span>/<span tdata=\'pageCount\'>'+' Total : ##'+'</span></font>'
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'Horient', 1)
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
    },
    print(){
      let LODOP = getLodop()
      this.printInit()
      LODOP.PREVIEW()
      this.$emit('close')
      // LODOP.PRINT(); 直接打印
      //LODOP.PRINTA(); 选择打印机打印
    }
  },
  updated(){
    this.skuBarcode()
  }
}
</script>
<style lang="scss" scoped>
table {
  text-align: left;
}
#one {
  color: #333;
}
tr > td {
  padding: 8px 5px;
  word-break: break-word;
}
</style>